<template>
  <el-container class="index">
    <header-bar @winFun="winFun"></header-bar>
    <el-container class="main-container">
      <el-aside width="150px">
        <sidebar></sidebar>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
    <footer-bar></footer-bar>
    <!-- 关闭窗口弹窗 -->
    <el-dialog
      :visible.sync="closeWindowVisible"
      width="330px"
      center
      class="close-window-dialog">
      <template #title>
        <strong>点击关闭按钮以后</strong>
      </template>
      <el-radio-group v-model="closeType">
        <el-radio :label="0">最小化到系统托盘</el-radio>
        <el-radio :label="1">退出应用</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeWindowVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirOperateWindow">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import sidebar from '@/components/common/sidebar.vue'
export default {
  name: 'index',
  components: { sidebar },
  data() {
    return {
      closeWindowVisible: false,
      closeType: 0
    }
  },
  created() {},
  methods: {
    winFun({ type, func }) {
      switch (type) {
        case 0:
          this.$ele.ipcRenderer.send(func)
          break
        case 1:
          this.$ele.ipcRenderer.send(func, this.winStatus)
          break
        default:
          this.closeWindowVisible = true
          break
      }
    },
    confirOperateWindow() {
      const closeType = ['windows-min-to-tray', 'windows-close']
      this.closeWindowVisible = false
      setTimeout(() => {
        this.$ele.ipcRenderer.send(closeType[this.closeType])
      }, 100)
    }
  }
}
</script>
<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // padding-top: 40px;
  /deep/.el-aside {
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    * {
      background: transparent;
      border: 0;
    }
  }
  .main-container {
    height: calc(100% - 75px);
    overflow: hidden;
  }
  /deep/.el-main {
    padding: 10px;
    margin: 0px;
  }
}
/deep/.close-window-dialog {
  .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
    .el-dialog__body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-radio-group {
      width: max-content;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .el-radio {
        margin: 0;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
